import React from 'react';
import MainLayout from '@/components/layout/MainLayout';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faPersonRunning,
  faWeight,
  faWeightScale,
  faHeart,
  faUtensils,
  faMoon,
  faCheck,
  faPlay,
  faHourglass,
  faClock,
  faFire,
  faBell,
  faChevronRight
} from '@fortawesome/free-solid-svg-icons';

export default function Plan() {
  return (
    <MainLayout title="HealthHub - 健康计划">
      {/* 顶部状态栏 */}
      <div className="bg-primary text-white p-4 flex justify-between items-center">
        <div className="flex items-center">
          <span className="font-bold text-xl">健康计划</span>
        </div>
        <div className="flex items-center space-x-3">
          <FontAwesomeIcon icon={faBell} />
          <div className="w-8 h-8 rounded-full bg-gray-300 overflow-hidden">
            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&h=100" 
                 alt="用户头像" className="w-full h-full object-cover" />
          </div>
        </div>
      </div>

      {/* 内容区域 */}
      <div className="p-4">
        {/* 目标进度概览 */}
        <div className="bg-gradient-to-r from-primary to-indigo-600 rounded-xl p-4 text-white mb-6 shadow-md">
          <div className="flex items-center justify-between mb-3">
            <div>
              <h3 className="font-medium">减重计划进度</h3>
              <p className="text-3xl font-bold mt-1">68%</p>
            </div>
            <div className="w-20 h-20 relative">
              {/* 圆形进度条 */}
              <svg className="w-full h-full" viewBox="0 0 36 36">
                <path className="stroke-current text-white/30" strokeWidth="3" fill="none" 
                  d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                <path className="stroke-current text-white" strokeWidth="3" fill="none" strokeDasharray="68, 100"
                  d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
              </svg>
              <div className="absolute inset-0 flex items-center justify-center">
                <FontAwesomeIcon icon={faFire} className="text-yellow-300 text-xl" />
              </div>
            </div>
          </div>
          <div className="grid grid-cols-3 gap-2 text-center">
            <div className="bg-white/10 rounded-lg p-2">
              <p className="text-sm opacity-90">当前</p>
              <p className="font-bold">68.5kg</p>
            </div>
            <div className="bg-white/10 rounded-lg p-2">
              <p className="text-sm opacity-90">目标</p>
              <p className="font-bold">65kg</p>
            </div>
            <div className="bg-white/10 rounded-lg p-2">
              <p className="text-sm opacity-90">剩余</p>
              <p className="font-bold">3.5kg</p>
            </div>
          </div>
          <div className="mt-3 text-sm opacity-90">
            <p>预计完成日期: 2024年6月30日</p>
            <p className="mt-1">健康减重速度: 每周0.5kg</p>
          </div>
        </div>

        {/* 今日任务完成情况 */}
        <h2 className="text-lg font-semibold mb-3">今日计划 (3/5)</h2>
        <div className="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden mb-6">
          {/* 任务1 */}
          <div className="p-4 border-b border-gray-100">
            <div className="flex items-center">
              <div className="w-5 h-5 bg-green-100 rounded-md flex items-center justify-center mr-3">
                <FontAwesomeIcon icon={faCheck} className="text-green-500 text-xs" />
              </div>
              <div className="flex-1">
                <h4 className="font-medium">30分钟核心力量训练</h4>
                <div className="flex items-center text-sm text-gray-500 mt-1">
                  <FontAwesomeIcon icon={faClock} className="text-xs mr-1" />
                  <span>09:00 - 09:30</span>
                  <span className="mx-2">|</span>
                  <span className="text-green-500">已完成</span>
                </div>
              </div>
            </div>
          </div>

          {/* 任务2 */}
          <div className="p-4 border-b border-gray-100">
            <div className="flex items-center">
              <div className="w-5 h-5 bg-green-100 rounded-md flex items-center justify-center mr-3">
                <FontAwesomeIcon icon={faCheck} className="text-green-500 text-xs" />
              </div>
              <div className="flex-1">
                <h4 className="font-medium">健康午餐</h4>
                <div className="flex items-center text-sm text-gray-500 mt-1">
                  <FontAwesomeIcon icon={faClock} className="text-xs mr-1" />
                  <span>12:00 - 13:00</span>
                  <span className="mx-2">|</span>
                  <span className="text-green-500">已完成</span>
                </div>
              </div>
            </div>
          </div>

          {/* 任务3 */}
          <div className="p-4 border-b border-gray-100 bg-blue-50">
            <div className="flex items-center">
              <div className="w-5 h-5 bg-blue-100 rounded-md flex items-center justify-center mr-3">
                <FontAwesomeIcon icon={faPlay} className="text-blue-500 text-xs" />
              </div>
              <div className="flex-1">
                <h4 className="font-medium">喝水提醒 (1.2/2.0L)</h4>
                <div className="flex items-center text-sm text-gray-500 mt-1">
                  <FontAwesomeIcon icon={faClock} className="text-xs mr-1" />
                  <span>全天</span>
                  <span className="mx-2">|</span>
                  <span className="text-blue-500">进行中</span>
                </div>
                <div className="w-full bg-blue-100 rounded-full h-1.5 mt-2">
                  <div className="bg-blue-500 h-1.5 rounded-full" style={{width: '60%'}}></div>
                </div>
              </div>
            </div>
          </div>

          {/* 任务4 */}
          <div className="p-4 border-b border-gray-100">
            <div className="flex items-center">
              <div className="w-5 h-5 bg-gray-100 rounded-md flex items-center justify-center mr-3">
                <FontAwesomeIcon icon={faHourglass} className="text-gray-400 text-xs" />
              </div>
              <div className="flex-1">
                <h4 className="font-medium">晚间散步5公里</h4>
                <div className="flex items-center text-sm text-gray-500 mt-1">
                  <FontAwesomeIcon icon={faClock} className="text-xs mr-1" />
                  <span>18:30 - 19:30</span>
                  <span className="mx-2">|</span>
                  <span className="text-gray-500">未开始</span>
                </div>
              </div>
            </div>
          </div>

          {/* 任务5 */}
          <div className="p-4">
            <div className="flex items-center">
              <div className="w-5 h-5 bg-gray-100 rounded-md flex items-center justify-center mr-3">
                <FontAwesomeIcon icon={faHourglass} className="text-gray-400 text-xs" />
              </div>
              <div className="flex-1">
                <h4 className="font-medium">睡前冥想15分钟</h4>
                <div className="flex items-center text-sm text-gray-500 mt-1">
                  <FontAwesomeIcon icon={faClock} className="text-xs mr-1" />
                  <span>22:00 - 22:15</span>
                  <span className="mx-2">|</span>
                  <span className="text-gray-500">未开始</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 我的计划 */}
        <h2 className="text-lg font-semibold mb-3">我的健康计划</h2>
        
        {/* 减重计划 */}
        <div className="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden mb-4">
          <div className="p-4 flex items-center justify-between">
            <div className="flex items-center">
              <div className="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
                <FontAwesomeIcon icon={faWeightScale} className="text-indigo-500" />
              </div>
              <div>
                <h3 className="font-medium">健康减重计划</h3>
                <p className="text-sm text-gray-500">目标: 减轻5kg体重</p>
              </div>
            </div>
            <div className="flex flex-col items-end">
              <span className="text-sm font-medium text-indigo-500">进行中</span>
              <span className="text-xs text-gray-400 mt-1">剩余42天</span>
            </div>
          </div>
          <div className="px-4 pb-4">
            <div className="w-full bg-gray-100 rounded-full h-1.5">
              <div className="bg-indigo-500 h-1.5 rounded-full" style={{width: '68%'}}></div>
            </div>
          </div>
        </div>
        
        {/* 跑步计划 */}
        <div className="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden mb-4">
          <div className="p-4 flex items-center justify-between">
            <div className="flex items-center">
              <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                <FontAwesomeIcon icon={faPersonRunning} className="text-blue-500" />
              </div>
              <div>
                <h3 className="font-medium">5公里跑步计划</h3>
                <p className="text-sm text-gray-500">目标: 30分钟内完成5公里</p>
              </div>
            </div>
            <div className="flex flex-col items-end">
              <span className="text-sm font-medium text-blue-500">进行中</span>
              <span className="text-xs text-gray-400 mt-1">第3周/8周</span>
            </div>
          </div>
          <div className="px-4 pb-4">
            <div className="w-full bg-gray-100 rounded-full h-1.5">
              <div className="bg-blue-500 h-1.5 rounded-full" style={{width: '35%'}}></div>
            </div>
          </div>
        </div>
        
        {/* 睡眠改善计划 */}
        <div className="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden mb-6">
          <div className="p-4 flex items-center justify-between">
            <div className="flex items-center">
              <div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
                <FontAwesomeIcon icon={faMoon} className="text-purple-500" />
              </div>
              <div>
                <h3 className="font-medium">睡眠质量改善</h3>
                <p className="text-sm text-gray-500">目标: 每晚8小时高质量睡眠</p>
              </div>
            </div>
            <div className="flex flex-col items-end">
              <span className="text-sm font-medium text-purple-500">进行中</span>
              <span className="text-xs text-gray-400 mt-1">第2周/4周</span>
            </div>
          </div>
          <div className="px-4 pb-4">
            <div className="w-full bg-gray-100 rounded-full h-1.5">
              <div className="bg-purple-500 h-1.5 rounded-full" style={{width: '50%'}}></div>
            </div>
          </div>
        </div>

        {/* 推荐计划 */}
        <h2 className="text-lg font-semibold mb-3">为您推荐</h2>
        <div className="grid grid-cols-1 gap-4 mb-8">
          {/* 推荐计划1 */}
          <div className="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
            <div className="h-32 overflow-hidden">
              <img src="https://images.unsplash.com/photo-1579126038374-6064e9370f0f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800" 
                   alt="健康饮食" className="w-full h-full object-cover" />
            </div>
            <div className="p-4">
              <div className="flex justify-between items-center mb-2">
                <h3 className="font-medium">30天健康饮食计划</h3>
                <span className="text-xs px-2 py-1 rounded-full bg-green-100 text-green-600">营养</span>
              </div>
              <p className="text-sm text-gray-500 mb-3">通过科学合理的饮食搭配，改善营养摄入结构，提高免疫力</p>
              <div className="flex justify-between items-center">
                <div className="flex items-center">
                  <div className="flex -space-x-2">
                    <div className="w-6 h-6 rounded-full border-2 border-white bg-gray-200 overflow-hidden">
                      <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100" alt="用户头像" className="w-full h-full object-cover" />
                    </div>
                    <div className="w-6 h-6 rounded-full border-2 border-white bg-gray-200 overflow-hidden">
                      <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100" alt="用户头像" className="w-full h-full object-cover" />
                    </div>
                    <div className="w-6 h-6 rounded-full border-2 border-white bg-gray-200 overflow-hidden">
                      <img src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100" alt="用户头像" className="w-full h-full object-cover" />
                    </div>
                  </div>
                  <span className="text-xs text-gray-500 ml-1">2.5k人参与</span>
                </div>
                <button className="text-xs bg-primary text-white px-3 py-1.5 rounded-full">加入计划</button>
              </div>
            </div>
          </div>

          {/* 推荐计划2 */}
          <div className="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
            <div className="h-32 overflow-hidden">
              <img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800" 
                   alt="冥想训练" className="w-full h-full object-cover" />
            </div>
            <div className="p-4">
              <div className="flex justify-between items-center mb-2">
                <h3 className="font-medium">21天冥想挑战</h3>
                <span className="text-xs px-2 py-1 rounded-full bg-purple-100 text-purple-600">心理</span>
              </div>
              <p className="text-sm text-gray-500 mb-3">每天15分钟，掌握科学的冥想方法，缓解压力，提高专注力</p>
              <div className="flex justify-between items-center">
                <div className="flex items-center">
                  <div className="flex -space-x-2">
                    <div className="w-6 h-6 rounded-full border-2 border-white bg-gray-200 overflow-hidden">
                      <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100" alt="用户头像" className="w-full h-full object-cover" />
                    </div>
                    <div className="w-6 h-6 rounded-full border-2 border-white bg-gray-200 overflow-hidden">
                      <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100" alt="用户头像" className="w-full h-full object-cover" />
                    </div>
                    <div className="w-6 h-6 rounded-full border-2 border-white bg-gray-200 overflow-hidden">
                      <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100" alt="用户头像" className="w-full h-full object-cover" />
                    </div>
                  </div>
                  <span className="text-xs text-gray-500 ml-1">1.8k人参与</span>
                </div>
                <button className="text-xs bg-primary text-white px-3 py-1.5 rounded-full">加入计划</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </MainLayout>
  );
} 